// import { defineConfig, toEscapedSelector as e, presetUno } from "unocss";
// import transformerVariantGroup from "@unocss/transformer-variant-group";

// export default defineConfig({
//   // ...UnoCSS options
//   rules: [
//     [
//       /^custom-hover$/,
//       ([], { rawSelector }) => {
//         const selector = e(rawSelector);
//         return `
// ${selector} {
//   display: flex;
//   height: 100%;
//   padding: 1px 10px 0;
//   cursor: pointer;
//   align-items: center;
//   transition: background var(--transition-time-02);
// }
// /* you can have multiple rules */
// ${selector}:hover {
//   background-color: var(--top-header-hover-color);
// }
// .dark ${selector}:hover {
//   background-color: var(--el-bg-color-overlay);
// }
// `;
//       }
//     ],
//     [
//       /^layout-border__left$/,
//       ([], { rawSelector }) => {
//         const selector = e(rawSelector);
//         return `
// ${selector}:before {
//   content: "";
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 1px;
//   height: 100%;
//   background-color: var(--el-border-color);
//   z-index: 3;
// }
// `;
//       }
//     ],
//     [
//       /^layout-border__right$/,
//       ([], { rawSelector }) => {
//         const selector = e(rawSelector);
//         return `
// ${selector}:after {
//   content: "";
//   position: absolute;
//   top: 0;
//   right: 0;
//   width: 1px;
//   height: 100%;
//   background-color: var(--el-border-color);
//   z-index: 3;
// }
// `;
//       }
//     ],
//     [
//       /^layout-border__top$/,
//       ([], { rawSelector }) => {
//         const selector = e(rawSelector);
//         return `
// ${selector}:before {
//   content: "";
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 1px;
//   background-color: var(--el-border-color);
//   z-index: 3;
// }
// `;
//       }
//     ],
//     [
//       /^layout-border__bottom$/,
//       ([], { rawSelector }) => {
//         const selector = e(rawSelector);
//         return `
// ${selector}:after {
//   content: "";
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   width: 100%;
//   height: 1px;
//   background-color: var(--el-border-color);
//   z-index: 3;
// }
// `;
//       }
//     ]
//   ],
//   presets: [presetUno({ dark: "class", attributify: false })],
//   transformers: [transformerVariantGroup()]
// });


import { 
  defineConfig,
  presetUno, 
  presetAttributify, 
  presetTypography, 
  presetIcons,
  transformerVariantGroup,
  transformerAttributifyJsx,
  transformerCompileClass,
  transformerDirectives,
  } from "unocss";
  // import presetRemToPx from "@unocss/preset-rem-to-px";
  export default defineConfig({
    //自定义规则
    rules: [[/^bg-?([0123456789abcdef]+)$/i, ([_, rgb]) => ({ background: `#${rgb}` })]],
    //预设规则 有前两个预设可以满足95%以上的需求
    presets: [
      //此预设规则可以看Tailwind CSS、Windi CSS、Bootstrap、Tachyons官网了解相关规则
      presetUno(), //m-10 理解为 margin:10rem 或者 m-10px 理解为 margin:10px
      presetAttributify(), //归因模式 bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" 背景颜色的简写  也可以再元素上不加class 直接写属样式 例如 <div m-2 p-10 bg-000></div>
     // presetTypography(), //排版预设 详细排版看https://unocss.dev/presets/typography#colors 使用这个前两个必须
     // presetIcons(), //css图标 支持图标看 https://icones.js.org/ 需要下载
  
     // 这里看个人需求是否要使用px
      // presetRemToPx({
      //   baseFontSize: 4, //基准字体大小  官方的默认预设（1单位 = 0.25rem） html的字体是16  所以这里为4
      // }), //默认unocss默认是rem 转换成 px单位
    ],
    //看个人需求添加转换器
    transformers: [
     transformerVariantGroup(),
     transformerAttributifyJsx(), 
     transformerCompileClass(), 
     transformerDirectives()
    ],
    //以下可以按个人需求添加
    shortcuts: {},
    layers: {},
    theme: {},
    variants: [],
    extractors: [],
    preflights:[]
  });